<template>
  <div>
    <div class="demo">
      <transition name="fadeIn">
        <tips
          v-if="ifDel"
          :text="DelText"
          @config="configDel"
          @cancel="cancelDel"
        ></tips>
      </transition>
      <transition name="fadeIn">
        <msg :text="uploadText" :msgWay="msgWay" v-if="msgStatus"></msg>
      </transition>
      <friendItem
        v-for="item in pagenationContent"
        :key="item.id"
        :id="item.id"
        :username="item.username"
        :prod="item.prod"
        :introduce="item.introduce"
        :way="item.way"
        :time="item.time"
        :title="item.title"
        :text="item.text"
        :avatar="item.avatar"
        :poster="item.poster"
        :render="item.render"
        :realname="item.realname"
        @playVideo="playVideo"
        @readWrite="readWrite"
        @ReadyDelProd="ReadyDelProd"
        @openAddVideo="openAddVideo"
      ></friendItem>
      <transition name="fadeScale">
        <div class="blackBg" v-show="ifBG"></div>
      </transition>
      <transition name="fadeIn">
        <span v-show="ifPlayer" style="display:inline-block;border-radius:50%;" @click="closePlayer">X</span>
      </transition>
      <transition name="translateY">
        <!-- <video  ref="videoPlayer" class="video-js video-player"></video> -->
        <video-player v-if="ifPlayer" :options="playerOptions" class="video-player"/>
      </transition>
      <div class="right" v-if="ifPlayer">
        <div class="card">{{ introduce }}</div>
      </div>
      <!-- <transition name="top">
        <videoAdd
          :origin="origin"
          @getVideoList="getAllVideoList()"
          v-if="ifAddProd"
          @cancelAddProd="cancelAddProd"
          @successMsg="successMsg"
          @errorMsg="errorMsg"
          ref="videoAdds"
        ></videoAdd>
      </transition> -->
      <pagenation
        :pageno="pageno"
        :allContent="videoList"
        @changePageNo="changePageNo"
        @changePageSize="changePageSize"
      ></pagenation>
      <!-- 添加新的作品 -->
      <!-- <transition appear appear-active-class="fadeInTranslate_X">
        <div class="addVideo" v-if="addProdgrant">
          <div class="add">
            <div class="right" @click="addNewProd()">
              <p>点击此处添加新的作品</p>
              <span>+</span>
            </div>
          </div>
        </div>
      </transition> -->
      <!-- 通过标题查询视频 -->
      <transition appear appear-active-class="fadeInTranslateX">
        <div class="searchInput">
          <input
            type="text"
            maxlength="20"
            placeholder="请输入标题"
            v-model="searchTitle"
            @focus="getFocusItem"
            @input="getCurrentItem"
            @blur="cancelSearch"
          />
          <i class="iconfont iconsousuo" @click="startSearchProd"></i>
        </div>
      </transition>
      <div
        class="menu"
        @click="ifSearchOrAdd = !ifSearchOrAdd"
        :class="{ active: ifSearchOrAdd }"
      >
        <div></div>
        <div></div>
        <div></div>
      </div>
      <transition name="fadeScaleFrom0">
        <div class="MSearchOrAdd" v-show="ifSearchOrAdd">
          <!-- 通过标题查询视频 -->
          <div class="MsearchInput">
            <input
              type="text"
              maxlength="20"
              placeholder="请输入标题"
              v-model="searchTitle"
              @focus="getFocusItem"
              @input="getCurrentItem"
              @blur="cancelSearch"
            />
            <i class="iconfont iconsousuo" @click="startSearchProd"></i>
          </div>
          <!-- 添加新的作品 -->
          <div class="MaddVideo" v-if="addProdgrant">
            <div class="add">
              <div class="right" @click="addNewProd()">
                <p>点击此处添加新的作品</p>
                <span>+</span>
              </div>
            </div>
          </div>
          <transition name="translateXFadeIn">
            <search class="MsearchList" v-show="ifShowSearch"></search>
          </transition>
        </div>
      </transition>

      <transition name="fadeScale">
        <div class="screen" v-if="IfReading">
          <div class="screenBox">
            <span class="cancel" @click="closeScreen">X</span>
            <p class="WriteTitle">{{ title }}</p>
            <span class="main" v-html="text"></span>
          </div>
        </div>
      </transition>
      <transition name="translateXFadeIn">
        <search
          class="searchList"
          @clickSearchItemForFriend="selectLastTitle"
          :searchMsg="searchMsg"
          v-show="ifShowSearch"
        ></search>
      </transition>
    </div>
  </div>
</template>

<script>
import friendItem from "./friendItem";
import videoAdd from "../../components/videoAdd";
import pagenation from "../../components/pagenation";
import search from "../../components/search";
import msg from "../../components/msg";
import tips from "../../components/tips";
import { updateFriendState } from "../../store.js";
import videoPlayer from "./videojs.vue"
export default {
  components: {
    friendItem,
    videoAdd,
    pagenation,
    search,
    msg,
    tips,
    videoPlayer
  },
  data() {
    return {
      introduce: "",
      origin: "add",
      ifDel: false,
      DelText: "你确定要删除该作品吗?",
      ifSearchOrAdd: false,
      msgStatus: false,
      uploadText: "上传成功",
      msgWay: "success",
      searchTitle: "",
      text: "",
      title: "",
      delId: 0,
      updateId: 0,
      IfReading: false,
      ifShowSearch: false,
      ifBG: false,
      ifPlayer: false,
      ifAddProd: false,
      pageno: 1,
      pagesize: 7,
      slowSearch: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        controls:true,
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: "", // url地址
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
      videoList: [],
      AllVideoList: [],
      UserChooseList: [],
    };
  },
  beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    },
  computed: {
    searchMsg() {
      let searchVideo = this.UserChooseList.filter((item, index) => {
        return index < 10;
      });
      return searchVideo.length ? searchVideo : [{ title: "没有数据" }];
    },
    //是否拥有添加视频的权限
    addProdgrant() {
      return (
        this.$store.getters.user.status === "876ea4f21078c7d38e3b0bdc74a" ||
        this.$store.getters.user.status === "d630fbb5fd6026ccb4af0eb68d3"
      );
    },
    pagenationContent() {
      console.log(this.videoList);
      return this.videoList.filter((item, index) => {
        return (
          index > (this.pageno - 1) * this.pagesize - 1 &&
          index <= (this.pageno - 1) * this.pagesize - 1 + this.pagesize
        );
      });
    },
  },
  mounted() {
    // this.player = videojs(
    //   this.$refs.videoPlayer,
    //   this.playerOptions,
    //   function onPlayerReady() {
    //     console.log("onPlayerReady", this);
    //   }
    // );
  },
  created() {
    this.getAllVideoList();
  },
  methods: {
    openAddVideo(options) {
      this.ifAddProd = true;
    },
    ReadyDelProd(id) {
      this.delId = id;
      this.ifDel = true;
    },
    configDel() {
      this.$axios
        .post("/prod/del", {
          id: this.delId,
          status: this.$store.getters.user.status,
          username: this.$store.getters.user.username,
        })
        .then((res) => {
          console.log(res);
          this.uploadText = "删除成功";
          this.msgWay = "success";
          this.msgStatus = true;
          setTimeout(() => {
            this.msgStatus = false;
          }, 2000);
        })
        .catch((err) => {
          this.uploadText = "删除失败,多次尝试失败请联系博主";
          this.msgWay = "error";
          this.msgStatus = true;
          setTimeout(() => {
            this.msgStatus = false;
          }, 2000);
        })
        .finally((res) => {
          this.getAllVideoList();
          this.ifDel = false;
        });
    },
    cancelDel() {
      this.ifDel = false;
    },
    successMsg() {
      this.uploadText = "上传成功";
      this.msgWay = "success";
      this.msgStatus = true;
      setTimeout(() => {
        this.msgStatus = false;
      }, 2000);
    },
    errorMsg() {
      this.uploadText = "添加失败,多次尝试失败请联系博主";
      this.msgWay = "error";
      this.msgStatus = true;
      setTimeout(() => {
        this.msgStatus = false;
      }, 2000);
    },
    closeScreen() {
      this.IfReading = false;
      this.ifBG = false;
    },
    readWrite(text) {
      this.text = text.text;
      this.title = text.title;
      this.ifBG = true;
      this.IfReading = true;
    },
    cancelSearch() {
      setTimeout(() => {
        this.ifShowSearch = false;
      }, 100);
    },
    selectLastTitle(msg) {
      console.log(msg);
      this.searchTitle = msg;
    },
    getCurrentItem() {
      if (slowSearch) {
        return;
      }
      this.slowSearch = true;
      this.$axios
        .get("/prod/chooseSearch", {
          params: {
            searchTitle: this.searchTitle,
          },
        })
        .then((res) => {
          this.slowSearch = false;
          if (res.data.error === -1) {
            this.UserChooseList = res.data.data;
          }
        });
    },
    getFocusItem() {
      this.ifShowSearch = true;
    },
    startSearchProd() {
      this.$axios
        .get("/prod/chooseSearch", {
          params: {
            searchTitle: this.searchTitle,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            this.videoList = res.data.data;
            this.UserChooseList = res.data.data;
          }
        });
    },
    changePageSize(pageSize) {
      console.log(typeof pageSize);
      this.pagesize = pageSize;
      this.pageno = 1;
    },
    changePageNo(index) {
      console.log(typeof index);
      this.pageno = index + 1;
    },
    cancelAddProd() {
      this.ifAddProd = false;
      this.ifBG = false;
    },
    addNewProd() {
      this.ifAddProd = true;
      this.ifBG = true;
      updateFriendState.origin = "add";
    },
    closePlayer() {
      this.ifPlayer = false;
      this.ifBG = false;
    },
    playVideo(msg) {
      this.playerOptions.sources[0].src = msg.video;
      this.playerOptions.poster = msg.poster;
      this.introduce = msg.introduce;
      this.ifPlayer = true;
      this.ifBG = true;
    //   Vue.nextTick(()=>{
    //     this.player = videojs(
    //   this.$refs.videoPlayer,
    //   this.playerOptions,
    //   function onPlayerReady() {
    //     console.log("onPlayerReady", this);
    //   }
    // );
    //   })
    },
    getAllVideoList() {
      this.$axios
        .get("/prod/search")
        .then((res) => {
          console.log(res);
          if (res.data.error == -1) {
            this.videoList = res.data.data;
            this.AllVideoList = res.data.data;
            this.UserChooseList = res.data.data;
          } else if (res.data.error == 0) {
            this.videoList = [];
            this.AllVideoList = [];
          }
        })
        .catch((err) => {
          alert("服务器错误");
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
@import url("../../css/pc/friend.less");
@import url("../../css/mobile/mfriend.less");
.blackBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>